<template>
  <div class="">
    <div class="modal-wrapper" v-if="showModal" :class="{animationShow: showModal}">
      <van-icon name="cross" @click="closeModal" color="#fff" style="float: right" />
      <slot></slot>
    </div>
  </div>
</template>
<style>

</style>
<script>
export default{
  props: {
    showModal: {
      type: Boolean
    }
  },
  data () {
    return {
    }
  },
  methods: {
    closeModal () {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
@keyframes fade-in {
    0% {opacity: 0;}
    40% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes fade-out {
    100% {opacity: 1;}
    40% {opacity: 0;}
    0% {opacity: 0;}
}
.modal-wrapper {
    position: absolute;
    width: 500px;
    height: 300px;
    background-color: rgba(0, 0, 0, 0.5);
    top: 35%;
    left: 33%;
    .iconfont {
        float: right;
    }
}
.animationShow {
  animation: fade-in;
  animation-duration: 1.5s;
}
.hideModalAn {
  animation: fade-out;
  animation-duration: 1.5s;
}
</style>
